<template>
  <view>
    <movable-area class="movable-area">
      <movable-view class="movable-view" :x="x" :y="y" direction="all">
        <view>
          <view @tap="clicknav">
            <view style="width: 50px;height: 50px">
              <image style="border-radius: 25px;width: 100%;height: 100%" src="/static/pages/img/图片1.png"></image>
            </view>
          </view>
          <view @tap="clicknav" style="margin-top: 10px">
            <view style="width: 50px;height: 50px">
              <image style="border-radius: 25px;width: 100%;height: 100%" src="/static/pages/img/图片2.png"></image>
            </view>
          </view>
        </view>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
/*悬浮按钮*/
export default {
  data() {
    return {
      x: 320,		//x坐标
      y: 520,		//y坐标
    }
  },
  methods: {
    clicknav(){
      uni.switchTab({
        url: "/pages/wodeyuding/wodeyuding"
      })
    }
  },
}
</script>

<style lang="scss">
$all_width: 96rpx;
$all_height:96rpx;

.movable-area {
  height: 100vh;
  width: 750rpx;
  top: 0;
  position: fixed;
  pointer-events: none;		//此处要加，鼠标事件可以渗透
  .movable-view {
    width: $all_width;
    height: $all_height;
    pointer-events: auto;	//恢复鼠标事件
    image {
      width: $all_width;
      height: $all_height;
    }
  }
}
</style>
